<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="showDialog"
    :title="title"
    :destroy-on-close="true"
    @close="onCloseDialog"
    width="60%"
  >
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="基本信息" name="essentialInfo">
        <el-form
          :model="formTerminalCoinData"
          :rules="rulesTerminalCoin"
          ref="formTerminalCoinData"
          label-width="140px"
        >
          <el-form-item label="设备名称">
            <el-input
              v-model="formTerminalCoinData.deviceName"
              placeholder="设备名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formTerminalCoinData.deviceTypeId"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.deviceTypeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="自动更新">
            <el-switch v-model="isUpgrade" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="isStatus" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>
        </el-form>

        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="deviceCoinInfoUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="参数配置" name="parameterconfiguration">
        <el-form
          :model="formTerminalData"
          :rules="rulesTerminal"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="后台密码">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.backstageDefaultPwd"
              placeholder="后台密码（默认：123456）"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="扣费顺序">
            <el-select
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.deductionMode"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('SYS_PAY_SORT')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <br />
          <el-form-item label="扫码方式">
            <el-select
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.payMethod"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('SCAN_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="付款时间">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.payTime"
              placeholder="付款时间(秒)"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="检测间隔(秒)">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.frontCheckTime"
              placeholder="检测间隔"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="打印机SN">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.printerSN"
              placeholder="打印机SN"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="打印页眉">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.printerHead"
              placeholder="打印页眉"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="打印页脚">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.printerFooter"
              placeholder="打印页脚"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="纸钞机">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isBill"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="兑币显示">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isCoin"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <br />
          <el-form-item label="兑币显示方式">
            <el-select
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isCoinType"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('SHOW_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="机器余币">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.mechanicalCoin"
              placeholder="机器余币"
              clearable
              size="small"
            />
          </el-form-item>

          <br />
          <el-form-item label="会员提币上限">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.drawCoinLimitation"
              placeholder="会员提币上限"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="页面操作倒计时">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.operateTime"
              placeholder="页面操作倒计时"
              clearable
              size="small"
            />
          </el-form-item>

          <br />
          <el-form-item label="单位名称">
            <el-input
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.coinToName"
              placeholder="单位名称"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="强制会员密码">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.forceMemberPwdCheck"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <br />
          <el-form-item label="控制板串口">
            <el-select
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.controlBoardSerialPort"
              clearable
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="dict in formatDictMap('COM_LIST')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="控制板类型">
            <el-select
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.controlBoardType"
              clearable
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="dict in formatDictMap('CONTROL_BOARD_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <br />
          <el-form-item label="读卡器串口">
            <el-select
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.serialPortOfCardReader"
              clearable
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="dict in formatDictMap('COM_LIST')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="读卡器类型">
            <el-select
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.serialTypeOfCardReader"
              clearable
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="dict in formatDictMap('CARD_READER_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <br />
          <el-form-item label="纸钞机串口">
            <el-select
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.banknoteMachineSerialPort"
              clearable
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="dict in formatDictMap('COM_LIST')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="纸钞机类型">
            <el-select
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.banknoteMachineSerialType"
              clearable
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="dict in formatDictMap('BANKNOTE_MACHINE_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <br />
          <el-form-item
            v-if="
              formTerminalData.sysDeviceCoinOtherSetVO.controlBoardType == 0 ||
              formTerminalData.sysDeviceCoinOtherSetVO.controlBoardType == 3
            "
            label="马达工作模式"
          >
            <el-select v-model="motorWorkMode" clearable placeholder="请选择" size="small">
              <el-option
                v-for="dict in formatDictMap('MOTOR_WORK_MODE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="功能开关" name="functionSwitch">
        <el-form
          :model="formTerminalData"
          :rules="rulesTerminal"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="扫码购币">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isScanBuyCoin"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="会员充值">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isMemberRecharge"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <br />
          <el-form-item label="优惠券兑币">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isCouponToCoin"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="签到兑币">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isSignInToCoin"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <br />
          <el-form-item label="会员提币">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isMemberToCoin"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="美团提币">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isMeituanToCoin"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <br />
          <el-form-item label="抖音提币">
            <el-switch
              v-model="formTerminalData.sysDeviceCoinOtherSetVO.isTiktokToCoin"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="活动设置" name="activitySettings">
        <div>纸钞套餐设置</div>
        <el-form v-model="billMealSetList" :inline="true" label-width="100px">
          <div
            v-for="(item, index) in formTerminalData.sysDeviceCoinOtherSetVO.billMealSetList"
            :key="index"
            class="demo-input-size"
          >
            <el-row>
              <el-col :span="4">
                <el-input v-model="item.sort" placeholder="顺序" clearable size="small">
                  <template #prepend>顺序</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.billName" placeholder="名称" clearable size="small">
                  <template #prepend>名称</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.billMoney" placeholder="面值" clearable size="small">
                  <template #prepend>面值</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.coinNum" placeholder="币数" clearable size="small">
                  <template #prepend>币数</template>
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-switch v-model="item.isShow" active-color="#13ce66" inactive-color="#ff4949" />
              </el-col>
            </el-row>
          </div>
          <br />
          <div>扫码套餐设置</div>
          <div
            v-for="(item, index) in formTerminalData.sysDeviceCoinOtherSetVO.scanCodeMealSetList"
            :key="index"
            class="demo-input-size"
          >
            <el-row>
              <el-col :span="4">
                <el-input v-model="item.sort" placeholder="顺序" clearable size="small">
                  <template #prepend>顺序</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.billName" placeholder="名称" clearable size="small">
                  <template #prepend>名称</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.billMoney" placeholder="面值" clearable size="small">
                  <template #prepend>面值</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.coinNum" placeholder="币数" clearable size="small">
                  <template #prepend>币数</template>
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-switch v-model="item.isShow" active-color="#13ce66" inactive-color="#ff4949" />
              </el-col>
            </el-row>
          </div>
          <br />
          <div>自定义会员套餐设置</div>
          <div
            v-for="(item, index) in formTerminalData.sysDeviceCoinOtherSetVO.customMealSetVOList"
            :key="index"
            class="demo-input-size"
          >
            <el-row>
              <el-col :span="4">
                <el-input v-model="item.sort" placeholder="顺序" clearable size="small">
                  <template #prepend>顺序</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.billName" placeholder="名称" clearable size="small">
                  <template #prepend>名称</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.billMoney" placeholder="面值" clearable size="small">
                  <template #prepend>面值</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.coinNum" placeholder="币数" clearable size="small">
                  <template #prepend>币数</template>
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-switch v-model="item.isShow" active-color="#13ce66" inactive-color="#ff4949" />
              </el-col>
            </el-row>
          </div>
        </el-form>
        <el-row style="text-align: center">
          <br />
          <br />
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { deviceAction } from '@/api/device/device.js';
  import { deviceTypeList } from '@/api/device/type.js';
  import { ElMessage } from 'element-plus';
  import { getDictOptions } from '@/utils/dict';

  export default {
    name: 'DialogCoinTerminal',
    dicts: [
      'SYS_PAY_SORT',
      'SCAN_TYPE',
      'SHOW_TYPE',
      'COM_LIST',
      'CONTROL_BOARD_TYPE',
      'CARD_READER_TYPE',
      'BANKNOTE_MACHINE_TYPE',
      'COIN_TYPE',
      'MOTOR_WORK_MODE',
    ],
    props: {
      dialog: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '终端设置',
      },
      deviceId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        activeName: 'essentialInfo',
        //        showDialog: false,
        isUpgrade: true,
        isStatus: true,
        formTerminalCoinData: {},
        formTerminalData: {
          sysDeviceCoinOtherSetVO: {},
        },
        terminalCoin: {
          sysDeviceCoinOtherSetVO: {},
        },
        deviceTypeList: [],
        rulesTerminalCoin: {
          deviceName: [{ required: true, message: '设备名称不可为空！', trigger: 'blur' }],
        },
        rulesTerminal: {
          insertcoinspulsespace: [
            { required: true, message: '投币脉冲间隔不可为空！', trigger: 'blur' },
          ],
          insertcoinspulsewidth: [
            { required: true, message: '投币脉冲宽度不可为空！', trigger: 'blur' },
          ],
          insertcoinssignallevel: [
            { required: true, message: '投币信号电平不可为空！', trigger: 'blur' },
          ],
          c1insertcoinspulsecount: [
            { required: true, message: '投币脉冲数不可为空！', trigger: 'blur' },
          ],
          pattern: [{ required: true, message: '请选择功能模式方式！', trigger: 'blur' }],
        },
        //兑币机纸钞设置兑币数
        billMealSetList: [],
        //兑币机扫码设置兑币数
        scanCodeMealSetList: [],
        //兑币机自定义会员设置兑币数
        customMealSetVOList: [],

        form: {},
        //马达工作模式
        motorWorkMode: '2',
      };
    },
    computed: {
      showDialog() {
        return this.dialog;
      },
    },
    watch: {},
    created() {
      this.getDeviceCoinDetails();
      //设备类型列表
      deviceTypeList({}).then((res) => {
        this.deviceTypeList = res;
      });
    },
    methods: {
      // 格式化字典
      formatDictMap(dictEnum) {
        return getDictOptions(dictEnum);
      },
      //终端设置
      getDeviceCoinDetails() {
        deviceAction('COIN', 'getDeviceCoinDetails', this.deviceId).then((response) => {
          this.formTerminalData = response;
          this.formTerminalCoinData = response;
          // this.billMealSetList = response.sysDeviceCoinOtherSetVO.billMealSetList;
          // this.scanCodeMealSetList = response.sysDeviceCoinOtherSetVO.scanCodeMealSetList;
          // this.customMealSetVOList = response.sysDeviceCoinOtherSetVO.customMealSetVOList;
          if (this.formTerminalCoinData.isStatus == 1) {
            this.isStatus = false;
          }
          if (this.formTerminalCoinData.isUpgrade == 0) {
            this.isUpgrade = false;
          }
          this.motorWorkMode =
            this.formTerminalData.sysDeviceCoinOtherSetVO.motorWorkMode.toString();
        });
      },
      //设备信息修改
      deviceCoinInfoUpdate() {
        this.formTerminalCoinData.isStatus = this.isStatus == true ? 0 : 1;
        this.formTerminalCoinData.isUpgrade = this.isUpgrade == true ? 1 : 0;
        deviceAction('DEVICE', 'updateDevice', this.formTerminalCoinData).then((response) => {
          if (response) {
            ElMessage({
              message: '操作成功！',
              type: 'success',
            });
            this.$emit('submit');
          } else {
            ElMessage({
              message: response.msg,
              type: 'error',
            });
          }
        });
      },
      //参数修改
      configureUpdate() {
        this.formTerminalData.sysDeviceCoinOtherSetVO.motorWorkMode = parseInt(this.motorWorkMode);
        deviceAction('COIN', 'getDeviceCoinSetOtherInfoUpdate', this.formTerminalData).then(
          (response) => {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
              this.$emit('submit');
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          },
        );
      },
      onCloseDialog() {
        this.$emit('close');
      },
    },
  };
</script>

<style scoped></style>
